import type { FowardZtSelect } from '@/pages/InventoryAnalysis/components/search/ZtSelect';
import ZtSelect from '@/pages/InventoryAnalysis/components/search/ZtSelect';
import { InputNumber } from 'antd';
import React, {
  forwardRef,
  useEffect,
  useImperativeHandle,
  useMemo,
  useRef,
  useState,
} from 'react';
import { Button } from 'devextreme-react';
import { useModel } from 'umi';
import './_style.less';
import BusinessTypeModal from './BusinessTypeModal';
import { SettingOutlined } from '@ant-design/icons';
import { Tooltip } from 'antd';
export interface SearchRenderBProps {
  ranking?: number | null;
  ztValue: string | null;
  showRanking?: boolean;
  formDisabled?: boolean;
  dbname?: string;
  setUserTypeCallback?: any;
}

export interface FowardSearchRenderB {
  getFormSearchValues: () => SearchRenderBProps;
}

const SearchRenderB = forwardRef(
  (props: SearchRenderBProps, ref: React.ForwardedRef<FowardSearchRenderB>) => {
    const {
      ranking: propsRanking,
      ztValue: propsZtValue,
      showRanking = true,
      formDisabled = false,
      dbname,
      setUserTypeCallback
    } = props;
    const businessTypeModal = useRef<any>(null);

    const { dataList } = useModel('ztModel');

    const ztDataListOptions = useMemo(() => {
      if (dataList && dataList.length > 0) {
        return dataList.map((item: any) => {
          return {
            label: item.displayName,
            value: item.Data_ID,
          };
        });
      }
      return [];
    }, [dataList]);

    const defalutZtValue = useMemo(() => {
      if (propsZtValue !== null && propsZtValue !== undefined) {
        return propsZtValue;
      }
      return ztDataListOptions.length > 0
        ? ztDataListOptions[ztDataListOptions.length - 1].value
        : null;
    }, [propsZtValue, ztDataListOptions]);

    const ztSelectRef = useRef<FowardZtSelect | null>(null);

    const [rakingValue, setRakingValue] = useState<number | null>(null);

    useEffect(() => {
      if (propsRanking !== undefined) {
        setRakingValue(propsRanking);
      }
    }, [propsRanking]);

    useImperativeHandle(
      ref,
      () => {
        return {
          getFormSearchValues: () => {
            const ztSelectValue = ztSelectRef.current?.getZtValue() || '';
            if (showRanking) {
              return {
                ztValue: ztSelectValue,
                ranking: rakingValue,
              };
            } else {
              return {
                ztValue: ztSelectValue,
              };
            }
          },
        };
      },
      [rakingValue, showRanking],
    );

    function handleRakingChange(value: number | null) {
      setRakingValue(value);
    }

    return (
      <>
        <div className={'custom-search-panel'} style={{ display: 'flex' }}>
          <div style={{ paddingLeft: 3 }}>
            <span style={{ marginRight: 3, marginLeft: 2 }}>账套：</span>
            <ZtSelect
              ref={ztSelectRef}
              value={defalutZtValue}
              option={ztDataListOptions}
              disabled={formDisabled}
            />
          </div>
          {showRanking ? (
            <div>
              <span style={{ marginRight: 10 }}>前</span>
              <InputNumber
                style={{ width: 80, marginRight: 5 }}
                min={1}
                value={rakingValue}
                onChange={handleRakingChange}
                disabled={formDisabled}
              />
              <span style={{ marginRight: 5 }}>名</span>
            </div>
          ) : null}
          {showRanking ? (
            <Tooltip
              title={"标准业务类型设置"}
              placement="bottom"
            >
              <SettingOutlined
                color="#4f2d7f"
                style={{ marginRight:10, display: "flex", alignItems: "center", fontSize: 17 }}
                onClick={() => businessTypeModal.current.show() } />
            </Tooltip>
          ) : null}
        </div>
        {showRanking ? (
          <BusinessTypeModal dbname={dbname} ref={businessTypeModal} okCallback={setUserTypeCallback} />
        ) : null}
      </>
    );
  },
);

export default SearchRenderB;
